﻿<!--<div class="container">-->
<div class="row">
    <!--SideBar-->
    <div class="col-sm-2">
        <div class="row">
            <div class="col-xs-12">

                <ul class="sidebar-nav">
                    <li>
                        <div ng-click="genre=''"><h2>Categories</h2></div>
                    </li>
                    <li ng-click="selectgenre(1)">
                        <a>Sports</a>
                    </li>
                    <li ng-click="selectgenre(2)">
                        <a>Shooting</a>
                    </li>
                    <li ng-click="selectgenre(3)">
                        <a>Action</a>
                    </li>
                    <li ng-click="selectgenre(4)">
                        <a>Adventure</a>
                    </li>
                    <li ng-click="selectgenre(5)">
                        <a>Puzzle</a>
                    </li>
                    <li ng-click="selectgenre(6)">
                        <a>Role-Playing</a>

                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--Search Input-->
    <br />
    <div class="col-sm-10">
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <div class="row">
                    <form action="">
                        <!--style="width:70%;position:absolute;top: -100px;z-index: 0;">-->
                        <div class="input-group">
                            <input type="text" name="search" class="form-control" ng-model="SearchField" placeholder="Search For A Game!" />
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button" ng-click="FindValue(SearchField)" value="Go"><span class="glyphicon glyphicon-search"></span></button>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!--List To Populate With Data-->
        <br />
        <div data-ng-repeat="game in games | filter:genre | filter:SearchField | orderBy: 'Title'">
            <div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" ng-click="collapseGame(game); getGameInfo(game)">
                                <h5>{{game.Title}}</h5>
                            </a>
                        </div>
                    </div>
                    <div class="panel-collapse collapse in" data-ng-show="game.collapseGame">
                        <div class="panel-body">
                            <div class="row">
                                <div><strong>Genre:</strong> {{game.Genre}}</div>
                                <div><strong>Platform:</strong> {{game.Platform}}</div><br />
                            </div>
                            <div class="row">
                                Users with game currently available<br />
                            </div>
                            <div class="row table table-hover table-bordered">
                                <div class="col-sm-3"><strong>User Name</strong></div>
                                <div class="col-sm-3"><strong>Rent</strong></div>
                                <div class="col-sm-3"><strong>Trade</strong></div>
                                <div class="col-sm-3"><strong>Buy</strong></div>
                            </div>
                            <div class="row table table-hover table-bordered" ng-repeat="user in game.UserList">
                                <div class="col-sm-3">{{user.UserName}}</div>
                                <div class="col-sm-3">
                                    <button class="btn-success" ng-show='user.RentPrice>0' ng-click='rentGame(user)'>
                                        {{user.RentPrice | currency}}
                                    </button>
                                    <button class="btn-danger" ng-show="user.RentPrice==0" disabled>Rent Unavailable</button>
                                </div>
                                <div class="col-sm-3">
                                    <button class="btn-success" ng-show="user.WillTrade" ng-click="tradeGame(user)">Trade Available</button>
                                    <button class="btn-danger" ng-show="!user.WillTrade" disabled>Trade Unavailable</button>
                                </div>
                                <div class="col-sm-3">
                                    <button class="btn-success" ng-show="user.SellPrice>0" ng-click='buyGame(user)'>{{user.SellPrice | currency}}</button>
                                    <button class="btn-danger" ng-show="user.SellPrice==0" disabled>Buy Unavailable</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
